import './MyNav.css'
import { useNavigate } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import UserInfo from './UserInfo';

function MyNav() {
    const navigate = useNavigate();
    const handleClick = function(path){
        navigate(path);
    }

    return (
        <ul class="nav">
            <li>宠物领养平台</li>
            <li onClick={()=>handleClick('/home')}>主页</li>
            <li onClick={()=>handleClick('/adoptcenter')}>领养中心</li>
            <li>社区</li>
            <li onClick={()=>handleClick('/personalcenter')}>个人中心</li>
            <li><UserInfo /></li>
        </ul>
    )
}

export default observer(MyNav);